import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

const state = {
    result:0,
    school:'尚硅谷',
    session:'前端Vue2',
    personList:[
        {name:'jake',age:13,id:'001'},
        {name:'Amy',age:15,id:'002'},
        {name:'Bow',age:23,id:'003'},
    ]
}
// 只有mutations里面可以直接操作state里面的数据
const mutations = {
    ADD(state, num) {
        state.result += num;
    },
    REDUCE(state, num) {
        state.result -= num;
    },
    ADDPERSON(state, person) {
        state.personList.push(person)
    }
}
// actions里面可以写异步请求 
const actions = {
    jia({commit},num) {
        commit('ADD',num)
    },
    jian({commit},num) {
        commit('REDUCE',num)
    },
    jiaOdd({state,commit}, num) {
        if(state.result%2){
            commit('ADD', num)
        }
    },
    waitJia({commit}, num) {
        setTimeout(() => {
            commit('ADD', num)
        },1000)
    },
    addperson({commit},person = {}) {
        commit('ADDPERSON',person)
    }
}

// 不是必须要使用的东西，当state里面的数据需要加工的时候
const getters = {
    resultTen(state) {
        return state.result * 10
    }
}

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})


// mapState 
// 使用方式
/*  
    computed() {
        mapState({sum:'result', xuexiao:'school'})的返回值是一个函数合集对象，
        使用ES6的对象展开语法糖【...】
        1、对象写法
        ...mapState({sum:'result', xuexiao:'school'})
        2、数组写法  简写形式，key value一致
        ...mapState(['result', 'school'])
    }
   然后就可以直接使用result属性和school属性
*/

// mapGetters
// 使用方式 与上面的mapState同理
/*  
    computed() {
         ...mapGetters(['resultTen'])
    }
   然后就可以直接使用resultTen属性
*/
